<template>
  <div class="box6">
    <div class="title">
      <p>热门景区排行</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <!-- 图形图表 -->
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
//获取dom节点
let charts = ref();
onMounted(() => {
  //一个容器展示多种图形图表
  let mycharts = echarts.init(charts.value);
  mycharts.setOption({
    title: {
      //主标题
      text: "景区排行",
      //调整标题位置
      left: "50%",
      textStyle: {
        color: "yellowgreen",
        fontSize: 20,
      },
      //子标题
      subtext: "各大景区",
      //子标题样式
      subtextStyle: {
        color: "yellowgreen",
        fontSize: 16,
      },
    },
    xAxis: {
      type: "category",
    },
    yAxis: {},
    //布局组件
    grid: {
      left: 20,
      bottom: 20,
      right: 20,
    },
    //系列
    series: [
      {
        type: "bar",
        data: [10, 20, 30, 40, 50, 60],
        //图形上的文本标签
        label: {
          show: true,
          //文字位置
          position: "top",
          color: "yellowgreen",
        },
        //是否显示背景颜色
        showBackground: true,
        backgroundStyle: {
          color: "skyblue",
        },
      },
      {
        type: "line",
        data: [10, 25, 15, 30, 20, 35],
        smooth: true,
      },
    ],
    tooltip: {
      show: true,
    },
  });
});
</script>

<style scoped lang="scss">
.box6 {
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-lb.png) no-repeat;
  background-size: 100% 100%;
  margin: 20px 0px;
  .title {
    color: white;
    font-size: 20px;
    margin-left: 20px;
    margin-top: 20px;
    p {
      color: white;
      font-size: 20px;
    }
  }
  .charts {
    height: calc(100% - 30px);
  }
}
</style>
